<template>
  <div>
      <el-table :data="perList"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       row-key="id">
        <el-table-column :label="$t('Permission.name')" prop="name">

        </el-table-column>
            <el-table-column :label="$t('Permission.code')" prop="code">

        </el-table-column>
            <el-table-column :label="$t('Permission.description')" prop="description">

        </el-table-column>
         <el-table-column :label="$t('Permission.action')">
            <template #default="{row}">
              <div>
                  <el-link type="primary" @click="addPermission(row.id)">添加</el-link>
                  <el-link type="primary" @click="toEdit(row.id)" style="margin:0 10px">编辑</el-link>
                  <el-link type="primary" @click="toDel(row.id)">删除</el-link>
              </div>
            </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
import {PermissionListApi,delPermissApi} from '@/api/permission'
import {treeData} from '@/utils/tool'
export default {
  name: 'PermissionTable',
  data() {
    return {
        perList:[] //表格需要的数据
    };
  },
  created(){
    this.getPerList();
  },
  beforeMount() {
    // 监听兄弟组件的事件
    this.$bus.$on('freshList',()=>{
        this.getPerList();
    })
  },
  mounted() {
    
  },

  methods: { 
    toEdit(id){ //点击编辑 将id 传给兄弟组件
      this.$bus.$emit('toEdit',id)
    },
    async toDel(id){ //删除权限接口
      // 删除接口
      await delPermissApi(id);
      this.getPerList();
    },
      addPermission(id){
          // 触发兄弟组件的 添加接口
          this.$bus.$emit("add",id)
      },
      async getPerList(){ //获取权限列表接口
          let res=await PermissionListApi()
          console.log(res.data,"-------------")
          this.perList=treeData(res.data) //赋值好 树形插件处理好的数据
          console.log( this.perList,"666666666666666")
      }
  },
};
</script>
<style lang="scss">
  
</style>